<template>
<div>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <div class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>投诉报修</el-breadcrumb-item>
                <el-breadcrumb-item>投诉建议</el-breadcrumb-item>
            </div>
        </el-breadcrumb>
    </div>
    <div class="selectdiv">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">

        <el-form-item  label="业主姓名:" prop="userName">
            <el-input  placeholder="请输入业主姓名" style="width:200px;" v-model="ruleForm.userName"></el-input>
        </el-form-item>

        <el-form-item  label="联系电话:" prop="phone">
            <el-input  placeholder="请输入联系电话" style="width:200px;" v-model="ruleForm.phone"></el-input>
        </el-form-item>

        <el-form-item label="单 元 号"  prop="houseUnit">
            <el-select
                    v-model="ruleForm.houseUnit"
                    clearable="true"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入单元号"
                    :remote-method="remoteMethod1"
                    @visible-change="visibleChange"
                    :loading="loading">
                <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

        </el-form-item>

        <el-form-item label="房  间  号"  prop="houseName">
            <el-select
                    v-model="ruleForm.houseName"
                    clearable="true"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入房间号"
                    :remote-method="remoteMethod2"
                    @visible-change="visibleChange"
                    :loading="loading">
                <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

        </el-form-item>

        <el-form-item label="投诉详情" prop="cDetail">
            <el-input  style="width:400px;"   type="textarea"
                       placeholder="请输入内容"
                       :autosize="{ minRows: 4, maxRows: 10}"
                       maxlength="200"
                       show-word-limit v-model="ruleForm.cDetail">

            </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
    </div>
</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				list1: [],
				loading: false,
				allOrds: [],
				allOrds1: [],
				options1:[],
				options2:[],
				ruleForm: {
					userName: '',
					phone: '',
					houseName: '',
					cDetail: ''
				},

				rules: {
					userName: [
						{ required: true, message: '请选择用户名', trigger: 'blur' }
					],
					phone: [
						{ required: true, message: '请选择电话号码', trigger: 'blur' }
					],
					houseUnit: [
						{ required: true, message: '请选择单元', trigger: 'blur' }
					],
					houseName: [
						{ required: true, message: '请选择房屋地址', trigger: 'blur' }
					],

					// type: [
					// 	{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
					// ],
					cDetail: [
						{ required: true, message: '请填写投诉详情', trigger: 'blur' }
					]
				}
			};
		},
		mounted(){
			this.initData();
		},
		methods: {
			async initData() {
				this.list=[]
				//远程搜索机构
				const {data: resp} = await this.$http.get('/repair/getUnit')
				//设置房间号和单元号的选择项

				resp.data.forEach((item, index) => {
					this.allOrds[index]=resp.data[index].houseUnit
					this.allOrds1[index]=resp.data[index].houseName
				})

				resp.data.forEach((item, index1) => {
					this.list[index1]={"value":this.allOrds[index1],"label":this.allOrds[index1]}
					this.list1[index1]={"value":this.allOrds1[index1],"label":this.allOrds1[index1]}
				})
                console.log(this.list)
				this.options1=this.list.slice(0, 10);
				this.options2=this.list1.slice(0, 10);


			},
			remoteMethod1(query) {
				if (query !== "") {
					// 展示匹配的前10条
					this.options1 = this.list
						.filter((item) => {
							return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
						})
						.slice(0, 10);

				} else {
					this.list=[]
					// 展示10条
					this.options1 = this.list.slice(0, 10);
					this.options2 = this.list1.slice(0, 10);
				}
			},
			remoteMethod2(query) {
				if (query !== "") {
					// 展示匹配的前10条
					this.options2 = this.list1
						.filter((item) => {
							return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
						})
						.slice(0, 10);

				} else {
					// 展示10条
					this.options2 = this.list1.slice(0, 10);
				}
			},
			visibleChange(value) {
				if (!value) {
					// 展示10条
					this.options1 = this.list.slice(0, 10);
					this.options1 = this.list1.slice(0, 10);
				}
			},


            //提交表单
			submitForm(formName) {
				this.$refs[formName].validate(async valid => {
					if (valid) {
						console.log(this.ruleForm)
						const {data: resp} = await this.$http.post('/complaint/addComplaint', this.ruleForm)
						console.log(resp)
						if(resp.code==200){
							this.$router.push('/requirService')
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>
<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

